<template>
  <div>
    <el-form :inline="true" :model="SearchBean" class="demo-form-inline">
  <el-form-item label="审批人">
    <el-input v-model="SearchBean.name" placeholder="审批人"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="getCustomerList(1)">查询</el-button>
  </el-form-item>
</el-form>
    <el-table :data="CustomerList" style="width: 100%" max-height="600">
      <el-table-column prop="id" label="编号" width="150"></el-table-column>
      <el-table-column prop="name" label="公司名称" width="250"></el-table-column>
      <el-table-column prop="contact" label="联系人" width="150"></el-table-column>
      <el-table-column prop="number" label="联系电话" width="150"></el-table-column>
      <el-table-column prop="address" label="地址" width="400"></el-table-column>
      <el-table-column prop="remarks" label="备注" width="150"></el-table-column>
      <el-table-column fixed="right" label="权限菜单设置" width="300">
        <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="upd(scope.row)">修改</el-button>
            <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
<el-pagination @current-change="getCustomerList" :current-page="pagination.pageNum" :page-count="pagination.pages"></el-pagination>

<el-button type="primary" icon="el-icon-circle-plus-outline" @click="addFlag = true">添加客户信息</el-button>

<el-dialog title="编辑信息" :visible.sync="updFlag">
  <el-form :model="updBean">
    <el-form-item label="公司名称" :label-width="formLabelWidth">
      <el-input v-model="updBean.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="联系人" :label-width="formLabelWidth">
      <el-input v-model="updBean.contact" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="联系电话" :label-width="formLabelWidth">
      <el-input v-model="updBean.number" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="地址" :label-width="formLabelWidth">
      <el-input v-model="updBean.address" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="备注" :label-width="formLabelWidth">
      <el-input v-model="updBean.remarks" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="updFlag = false">取 消</el-button>
    <el-button type="primary" @click="updSupplier">确 定</el-button>
  </div>
</el-dialog>
  <el-dialog title="添加信息" :visible.sync="addFlag">
  <el-form :model="addBean">
    <el-form-item label="公司名称" :label-width="formLabelWidth">
      <el-input v-model="addBean.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="联系人" :label-width="formLabelWidth">
      <el-input v-model="addBean.contact" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="联系电话" :label-width="formLabelWidth">
      <el-input v-model="addBean.number" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="地址" :label-width="formLabelWidth">
      <el-input v-model="addBean.address" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="备注" :label-width="formLabelWidth">
      <el-input v-model="addBean.remarks" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="addFlag = false">取 消</el-button>
    <el-button type="primary" @click="addSupplier">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>


<script>
export default {
  methods: {
    getCustomerList:function(pageNo){
      var $this = this;
      this.axios({
        method: "post",
        url: "http://localhost:9999/biz/tCustomer/list",
        params: {
          pageNo: pageNo,
          access_token: localStorage.getItem("access_token"),
          name:this.SearchBean.name
        },
      }).then(function(res) {
        window.console.log(res,"res")
        $this.CustomerList = res.data.obj.list;
        $this.pagination = res.data.obj;
      });
    },
    upd:function(row){
      this.updBean=row
      this.updFlag=true
    },
    updSupplier:function(){
      var $this = this;
      this.axios({
        method: "post",
        url: "http://localhost:9999/biz/tCustomer/update?access_token="+localStorage.getItem("access_token"),
        params:this.updBean
      }).then(function(res) {
        window.console.log(res,"res")
        if(res.data.obj>0){
            alert("修改成功")
            $this.updFlag=false
            $this.getCustomerList(1);
        }else{
          alert("error")
          $this.getCustomerList(1);
        }
        
      });
    },
    addSupplier:function(){
      var $this = this;
      this.axios({
        method: "post",
        url: "http://localhost:9999/biz/tCustomer/insert?access_token="+localStorage.getItem("access_token"),
        params:this.addBean
      }).then(function(res) {
        window.console.log(res,"res")
        if(res.data.obj>0){
            alert("添加成功")
            $this.addFlag=false
            $this.getCustomerList(1);
        }else{
          alert("error")
          $this.getCustomerList(1);
        }
        
      });
    },
    del:function(row){
     var $this = this;
      this.axios({
        method: "post",
        url: "http://localhost:9999/biz/tCustomer/delete?access_token="+localStorage.getItem("access_token"),
        params:{
          ids:row.id
        }
      }).then(function(res) {
        window.console.log(res,"res")
        if(res.data.obj>0){
            alert("删除成功")
            $this.getCustomerList(1);
        }else{
          alert("error")
          $this.getCustomerList(1);
        }
        
      });
    }
  },
  data() {
    return {
      CustomerList: [],
      pagination:{},
      SearchBean:{},
      addFlag: false,
      addBean:{},
      updFlag: false,
      updBean: {},
      formLabelWidth:'120px'
    };
  },
  mounted() {
    this.getCustomerList(1);
  }
};
</script>
